<template>
  <div class="column-detail-page w-75 mx-auto">
    <div class="column-info row mb-4 border-bottom pb-4 aligin-items-center">
      <div class="col-3 text-center">
        <img
          :src="column.avatar.url"
          alt=""
          class="rounded-circle border mt-5 h-50"
        />
      </div>
      <div class="col-9">
        <h4>{{ column.title }}</h4>
      </div>
    </div>
  </div>
  <PostList :list="list"></PostList>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted} from "vue";
import { useStore } from "vuex";
import { useRoute, useRouter } from "vue-router";
import PostList from "@/components/PostList.vue";
export default defineComponent({
  components: { PostList },
  setup() {
    // 他是一个函数，调用之后可以返回相应的对象
    const route = useRoute();
    const store = useStore();
    const currenId = route.params.id;
    onMounted(()=>{
      store.dispatch('fetchColumn',currenId)
      store.dispatch('fetchPosts',currenId)
    })
    const column = computed(() => store.getters.getColumnById(currenId));
    const list = computed(() => store.getters.getPostById(currenId));

    return {
      route,
      column,
      list,
    };
  },
});
</script>

<style scoped></style>
